<!-- ERP-财务看板 -->
<template>
	<view class="boardWrap">
		<!-- 快捷菜单 -->
		<view class="commonBox">
			<view class="commonBox-title">
				<view class="commonBox-title-left">
					<text>快捷发起</text>
				</view>
				<view class="commonBox-title-right">
					<uni-icons fontFamily="CustomFontPlatform" :size="18" color="#51d0d0"
						@click="showPopUp('menuConfig')">{{'\ue657'}}</uni-icons>
				</view>
			</view>
			<view class="commonBox-content">
				<swiper :indicator-dots="true" class="swiper" :current="swiperIndex" @change="onSwiperChange">
					<swiper-item v-for="page in Math.ceil(shortcuts.length/8)">
						<u-grid col="4">
							<u-grid-item
								:customStyle="{paddingTop:'10px',borderRadius:'5px',background:'linear-gradient(to bottom right, #F6F6F6, #FFFFFF)'}"
								v-for="(menu, menuIndex) in shortcuts.filter((item,index)=>index<(8*page) && index>=(page-1)*8)"
								:index="menuIndex" :key="menuIndex" @click="checkOutMenu(menu)">
								<uni-icons v-if="menu.CustomFont && menu.PIC_PH" :fontFamily="menu.CustomFont"
									:size="22" :color="menu.AP_Colour">{{ $utils.toUniCode(menu.PIC_PH) }}</uni-icons>
								<uni-icons v-else fontFamily="CustomFontPlatform" :size="22"
									color="#3ace4b">{{ $utils.toUniCode('&#xe62c;') }}</uni-icons>
								<text class="grid-text">{{ getAbbrev(menu.APFunName,7)	}}</text>
							</u-grid-item>
						</u-grid>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<view class="commonBox">
			<view class="commonBox-title">
				<view class="commonBox-title-left">
					<u-tabs lineColor="#51d0d0"
						:activeStyle="{color:'#51d0d0',fontWeight:'500',transform:'scale(1.05)'}" :list="todoCondition"
						@change="item=>switchTab('TODO',item)">
					</u-tabs>
				</view>
				<view class="commonBox-title-right">
				</view>
			</view>
			<view class="commonBox-content">
				<view class="scrollWrap">
					<view v-for="(item,index) in waitDataShow" @click="handleClick_wait(item)" :index="index"
						:key="index" class="scrollWrap-item">
						<view class="todoTop">
							<uni-icons fontFamily="CustomFontPlatform" :size="18"
								color="#3ace4b">{{ $utils.toUniCode('&#xe62c;') }}</uni-icons>
							<text class="todoTop-text">{{item.Num}}</text>
						</view>
						<view class="todoBot">
							<text>{{getAbbrev(item.name,8)}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="commonBox">
			<view class="commonBox-title">
				<view class="commonBox-title-left">
					<text>实时数据</text>
				</view>
				<view class="commonBox-title-right">
					<u-tabs lineColor="#51d0d0"
						:activeStyle="{color:'#51d0d0',fontWeight:'500',transform:'scale(1.05)'}" :list="realCondition"
						@change="item=>switchTab('REALTIME',item)">
					</u-tabs>
				</view>
			</view>
			<view class="commonBox-content">
				<view class="scrollWrap">
					<view v-for="(item,index) in realTimeData" :index="index" :key="index" class="scrollWrap-item">
						<view class="rtTop">
							<text class="rtTop-left">财</text>
							<text class="rtTop-right">{{item.Qty}}</text>
						</view>
						<view class="rtBot">
							<text>{{item.name}}</text>
							<text class="rtBot-right"><text style="color:#c9283a;">{{item.Num}}</text>单</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="commonBox">
			<view class="commonBox-title">
				<view class="commonBox-title-left">
					<text>应收应付</text>
				</view>
				<view class="commonBox-title-right">
					<u-tabs lineColor="#51d0d0"
						:activeStyle="{color:'#51d0d0',fontWeight:'500',transform:'scale(1.05)'}" :list="saleCondition"
						@change="item=>switchTab('SALE',item)">
					</u-tabs>
				</view>
			</view>
			<view class="commonBox-content">
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts" :ontouch="true"
						:chartData="chart1Data"></qiun-data-charts>
				</view>
			</view>
		</view>

		<view class="commonBox">
			<view class="commonBox-title">
				<view class="commonBox-title-left">
					<text>应收应付占比</text>
				</view>
				<view class="commonBox-title-right">
					<u-tabs lineColor="#51d0d0"
						:activeStyle="{color:'#51d0d0',fontWeight:'500',transform:'scale(1.05)'}" :list="propCondition"
						@change="item=>switchTab('PROP',item)">
					</u-tabs>
				</view>
			</view>
			<view class="commonBox-content">
				<view class="chart-box">
					<qiun-data-charts type="column" :opts="opts" :ontouch="true"
						:chartData="chart2Data"></qiun-data-charts>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperIndex: 0,
				module: {},
				shortcuts: [], // 已配置全部快捷菜单(默认+自定义)
				currModuleID: 1, // 当前模块ID
				currBoardID: 13, // 当前看板ID
				waitDataShow: [],
				realTimeData: [], // 实时数据
				chart1Data: {},
				chart2Data: {},
				todoCondition: [{
					name: '待办'
				}, {
					name: '待审核'
				}],
				realCondition: [{
					name: '本日'
				}, {
					name: '本月'
				}],
				saleCondition: [{
					name: '本周'
				}, {
					name: '本月'
				}, {
					name: '本年'
				}], // 销售切换条件
				propCondition: [{
					name: '本周'
				}, {
					name: '本月'
				}, {
					name: '本年'
				}],
				opts: {
					touchMoveLimit: 24,
					enableScroll: true,
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4
					}
				},

				TabbarData: [],
				workspaceData: [],
				organizedData: [],
			}
		},
		mounted() {
			let that = this;
			setTimeout(() => {
				that.initShortcut();
				that.initTabs();
			}, 200)
		},

		methods: {

			onSwiperChange(e) {
				this.swiperIndex = e.detail.current;
			},

			// 快捷菜单初始化
			initShortcut() {
				let that = this;
				that.module = that.$store.state.appConfigInfo.APPModules.find(item => item.ModuleID == that.currModuleID);
				let str = uni.getStorageSync('shortcuts' + that.currBoardID); // 获取缓存快捷菜单

				if (str) { // 存在快捷菜单缓存,则对比后更新
					let shortcuts = JSON.parse(str);
					let Menus1 = that.module.shortcuts.filter(item => item.IsShortcut && item.KanBanID == that
						.currBoardID); // 当前看板默认菜单
					let Menus2 = that.compareMenus(shortcuts, that.module.authPages); // 非默认菜单(范围包含app模块下其他看板默认和所有其他授权菜单)

					that.shortcuts = [...Menus1, ...Menus2];
				} else { // 当前看板默认菜单
					that.shortcuts = that.module.shortcuts.filter(item => item.IsShortcut && item.KanBanID == that
						.currBoardID);
				}

				if (that.swiperIndex >= Math.ceil(that.shortcuts.length / 8)) {
					that.swiperIndex = Math.ceil(that.shortcuts.length / 8) - 1;
				}

				that.persistShortcut(that.shortcuts);
			},

			// 比较缓存非默认快捷菜单并返回
			compareMenus(oldMenu, newMenu) {
				let that = this;
				let menus = oldMenu.filter(item => {
					// 当前看板非默认菜单和其他看板所有菜单
					if ((item.KanBanID == that.currBoardID && !item.IsShortcut) || (item.KanBanID != that
							.currBoardID)) {
						return item;
					}
				})
				menus.forEach((item, index) => {
					let flag = newMenu.some(m => m.APPFunID == item.APPFunID);
					if (!flag) {
						menus.splice(index, 1);
					}
				});

				return menus;
			},

			// 持久化快捷菜单
			persistShortcut(shortcuts) {
				let that = this;
				that.$store.commit('ChangeAndSetStateData', {
					Name1: 'shortcuts' + that.currBoardID,
					data: shortcuts,
					StorageName: 'shortcuts' + that.currBoardID,
					StorageData: JSON.stringify(shortcuts)
				});
			},

			// 显示快捷菜单设置
			showPopUp() {
				let that = this;

				let data = {
					currModuleID: that.currModuleID,
					currBoardID: that.currBoardID,
					currModule: that.module,
					currShortcut: that.shortcuts
				}
				// console.log(data);
				that.$store.commit('ChangeAndSetStateData', {
					Name1: 'shortcutSetting',
					data: data
				});

				uni.navigateTo({
					url: '/commonPage/kanban/ShortcutSetting/shortcutSetting',
					events: {
						refreshShortcut() {
							that.initShortcut();
						}
					}
				})

			},

			// 菜单字数截取(菜单名称,截取字数)
			getAbbrev(menuName, num) {
				let result = '';
				if (menuName.length > num) {
					result = menuName.substring(0, num);
				} else {
					result = menuName;
				}
				return result;
			},

			// 初始化图表
			async initTabs() {
				await this.GetWaitData(); // 获取代办数据
				await this.getRealTimeData('本日');
				await this.getSalesVolume('本周');
				await this.getSaleProportion('本周');
			},

			// 跳转当前菜单页面
			checkOutMenu(menu) {
				let that = this;
				let filterData = that.$store.state.appConfigInfo.APPModules.filter(item => item.ModuleName == menu.APPTypeName);

				// 持久化模块数据
				that.$store.commit('ChangeAndSetStateData', {
					Name1: 'appConfigInfo.ModuleInfo_All',
					data: this.organizedData,
					StorageName: 'ModuleInfo_All',
					StorageData: JSON.stringify(this.organizedData),
				});

				that.$store.commit('ChangeAndSetStateData', {
					Name1: 'appConfigInfo.Module_Tabbar',
					data: this.TabbarData,
					StorageName: 'Module_Tabbar',
					StorageData: JSON.stringify(this.TabbarData),
				});

				// 更新活动模块到 Vuex 存储
				that.$store.commit('ChangeAndSetStateData', {
					Name1: 'appConfigInfo.ActiveModule',
					data: filterData[0],
					StorageName: 'ActiveModule',
					StorageData: JSON.stringify(filterData[0]),
				});

				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'Menu',
					data: menu
				});
				// 页面跳转待配置
				uni.navigateTo({
					url: menu.AP_Link
				})
			},

			// 持久化快捷菜单
			persistShortcut(shortcuts) {
				let that = this;
				that.$store.commit('ChangeAndSetStateData', {
					Name1: 'shortcuts' + that.currBoardID,
					data: shortcuts,
					StorageName: 'shortcuts' + that.currBoardID,
					StorageData: JSON.stringify(shortcuts)
				});
			},

			handleClick_wait(data) {
				let newData = this.$utils.deepClone(data)

				newData['APFunName'] = '';
				newData['Para'] = '';

				let path = '';
				let moduleName = '';

				if (newData && newData['Url']) {
					const [urlPath, queryString] = newData['Url'].split('?');
					path = urlPath;

					if (queryString) {
						// 直接搜索并提取moduleName的值  
						const params = queryString.split('&');
						for (const param of params) {
							const [key, value] = param.split('=');
							if (key === 'moduleName') {
								moduleName = decodeURIComponent(value);
								break; // 找到后退出循环  
							}
						}
					}
				}
				newData['APFunName'] = moduleName;
				newData['Para'] = moduleName;

				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'Menu',
					data: newData
				});

				let theType = this.waitActiveCurrent == 0 ? "wait" : "audit";
				uni.navigateTo({
					url: path + "?type=" + theType
				})

			},

			// 获取待办数据
			GetWaitData() {
				let that = this;

				that.Request.request('APP_GetToDoByKanBan', {
					KanBanID: that.currBoardID,
				}, (ret) => {
					if (ret.status == 200) {
						that.notApproveData = ret.data.ds;
						that.waitData = [...ret.data.ds1];

						// 默认初始展示代办
						that.waitDataShow = that.notApproveData;
					}
				}, (err) => {
					// that.$utils.msg(JSON.stringify(err))
				})
			},

			// 获取实时数据
			getRealTimeData(name) {
				let that = this;
				const type = name === '本日' ? 'day' : name === '本月' ? 'month' : null;
				const dateRange = that.getTimeRange(type, 'yyyy-MM-dd');

				that.Request.request('PlatForm_SFKNum', {
						FSDate: dateRange[0],
						FEDate: dateRange[1]
					}, function(res) {
						that.realTimeData = res.data.ds;
					},
					function(err) {}, that.Request.IPAgreement() + that.Request.serverIP() +
					'/Frame/SqlData', 1)
			},
			// 获取销量
			getSalesVolume(name) {
				let that = this;
				const type = name === '本周' ? 'week' : name === '本月' ? 'month' : name === '本年' ? 'year' :
					null;
				// const dateRange = that.getTimeRange(type, 'yyyy-MM-dd');
				that.Request.request('PlatForm_SFKQty', {
						FType: type
					}, function(res) {
						let theData = that.mergeDataSets(res.data.ds, res.data.ds1)
						let newData = that.fillMissingTimeData(name, theData, 'Money', 'Money1')

						that.chart1Data = {
							categories: newData['name'],
							series: [{
								name: '收款单',
								data: newData['Money']
							}, {
								name: '付款单',
								data: newData['Qty']
							}]
						}
						// console.log(that.chart1Data);
					},
					function(err) {}, that.Request.IPAgreement() + that.Request.serverIP() +
					'/Frame/SqlData', 1)
			},
			// 获取销售占比
			getSaleProportion(name) {
				let that = this;
				const type = name === '本周' ? 'week' : name === '本月' ? 'month' : name === '本年' ? 'year' :
					null;
				const dateRange = that.getTimeRange(type, 'yyyy-MM-dd');

				that.Request.request('PlatForm_FPQty', {
						FType: type
					}, function(res) {
						// console.log(res);
						// let data = res.data.ds.map(item => {
						// 	return {
						// 		...item,
						// 		value: item.Rate
						// 	}
						// })
						// that.chart2Data = {
						// 	series: [{
						// 		data: data
						// 	}]
						// }
						let theData = that.mergeDataSets(res.data.ds, res.data.ds1)

						let newData = that.fillMissingTimeData(name, theData, 'Money', 'Money1',
							'Money2');
						that.chart2Data = {
							categories: newData['name'],
							series: [{
								name: '销售发票',
								data: newData['Money']
							}, {
								name: '采购发票',
								data: newData['Qty']
							}, {
								name: '外协发票',
								data: newData['Money2']
							}]
						}
					},
					function(err) {}, that.Request.IPAgreement() + that.Request.serverIP() +
					'/Frame/SqlData', 1)
			},
			// tab条件切换
			switchTab(switchType, item) {
				switch (switchType) {
					case 'TODO':
						// this.getTodoData(item.name);
						this.waitActiveCurrent = item.index;
						this.waitDataShow = item.name === '待办' ? this.notApproveData : this.waitData;

						this.$forceUpdate()
						break;
					case 'REALTIME':
						this.getRealTimeData(item.name);
						break;
					case 'SALE':
						this.getSalesVolume(item.name);
						break;
					case 'PROP':
						this.getSaleProportion(item.name);
						break;
					default:
						break;
				}
			},
			// 获取日期区间
			getTimeRange(type, format) { // 传入字段，返回时间范围
				var now = new Date();
				var year = now.getFullYear();
				var month = now.getMonth() + 1; // 月份从0开始，所以需要加1
				var day = now.getDate();
				var weekDay = now.getDay(); // 0表示周日，1表示周一，以此类推

				switch (type) {
					case 'day':
						return [this.formatDate(new Date(year, month - 1, day, 0, 0, 0), format), this.formatDate(new Date(
							year, month - 1, day, 23, 59, 59), format)];
					case 'week':
						var startOfWeek = new Date(year, month - 1, day - weekDay, 0, 0, 0);
						var endOfWeek = new Date(year, month - 1, day + (6 - weekDay), 23, 59, 59);
						return [this.formatDate(startOfWeek, format), this.formatDate(endOfWeek, format)];
					case 'month':
						return [this.formatDate(new Date(year, month - 1, 1, 0, 0, 0), format), this.formatDate(new Date(
							year, month, 0, 23, 59, 59), format)];
					case 'year':
						return [this.formatDate(new Date(year, 0, 1, 0, 0, 0), format), this.formatDate(new Date(year, 11,
							31, 23, 59, 59), format)];
					default:
						throw new Error('Invalid type');
				}
			},
			// 日期格式化
			formatDate(date, format) {
				var map = {
					'M': date.getMonth() + 1, // 月份
					'd': date.getDate(), // 日
					'h': date.getHours(), // 小时
					'm': date.getMinutes(), // 分
					's': date.getSeconds(), // 秒
					'q': Math.floor((date.getMonth() + 3) / 3), // 季度
					'S': date.getMilliseconds() // 毫秒
				};
				format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
					var v = map[t];
					if (v !== undefined) {
						if (all.length > 1) {
							v = '0' + v;
							v = v.substr(v.length - 2);
						}
						return v;
					} else if (t === 'y') {
						return (date.getFullYear() + '').substr(4 - all.length);
					}
					return all;
				});
				return format;
			},
			fillMissingTimeData(timeRange, dataArray, Qtys, Moneys, Money2) {
				let result = {
					name: [],
					Qty: [],
					Money: []
				};

				if (Money2) {
					result['Money2'] = [];
				}

				// 根据时间范围初始化 result 数组
				let currentDate = new Date();
				if (timeRange === '本周') {
					let startOfWeek = currentDate.getDate() - currentDate.getDay();
					for (let i = startOfWeek; i <= currentDate.getDate(); i++) {
						let date = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);
						let formattedDate = (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate()
							.toString().padStart(2, '0');
						let existingItem = dataArray.find(item => item.name === formattedDate);
						if (existingItem) {
							result.name.push(existingItem.name);
							result.Qty.push(existingItem[Qtys]);
							result.Money.push(existingItem[Moneys]);
							if (Money2) {
								result[Money2].push(existingItem[Money2]);
							};
						} else {
							result.name.push(formattedDate);
							result.Qty.push(0);
							result.Money.push(0);
							if (Money2) {
								result[Money2].push(0);
							};
						}
					}
				} else if (timeRange === '本月') {
					for (let i = 1; i <= currentDate.getDate(); i++) {
						let date = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);
						let formattedDate = (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate()
							.toString().padStart(2, '0');
						let existingItem = dataArray.find(item => item.name === formattedDate);
						if (existingItem) {
							result.name.push(existingItem.name);
							result.Qty.push(existingItem[Qtys]);
							result.Money.push(existingItem[Moneys]);
							if (Money2) {
								result[Money2].push(existingItem[Money2]);
							};
						} else {
							result.name.push(formattedDate);
							result.Qty.push(0);
							result.Money.push(0);
							if (Money2) {
								result[Money2].push(0);
							};
						}
					}
				} else if (timeRange === '本年') {
					for (let i = 0; i <= currentDate.getMonth(); i++) {
						let date = new Date(currentDate.getFullYear(), i, 1);
						let formattedDate = i + 1;
						let existingItem = dataArray.find(item => item.name === formattedDate);
						if (existingItem) {
							result.name.push(existingItem.name + '月');
							result.Qty.push(existingItem[Qtys]);
							result.Money.push(existingItem[Moneys]);
							if (Money2) {
								result[Money2].push(existingItem[Money2]);
							};
						} else {
							result.name.push(formattedDate + '月');
							result.Qty.push(0);
							result.Money.push(0);
							if (Money2) {
								result[Money2].push(0);
							};
						}
					}
				}

				return result;
			},
			mergeDataSets(ds, ds1, ds2) {
				// 创建一个映射，用于存储合并后的结果
				const mergedMap = new Map();

				// 处理 ds 数据集
				ds.forEach(item => {
					const {
						name,
						Money
					} = item;
					// 如果映射中已经有这个 name，更新它；否则，添加新条目
					if (!mergedMap.has(name)) {
						mergedMap.set(name, {
							name,
							Money,
							Money1: 0,
							Money2: 0
						});
					} else {
						const existingItem = mergedMap.get(name);
						existingItem.Money = Money;
					}
				});

				// 处理 ds1 数据集
				ds1.forEach(item => {
					const {
						name,
						Money
					} = item;
					// 如果映射中已经有这个 name，更新它；否则，添加新条目
					if (!mergedMap.has(name)) {
						mergedMap.set(name, {
							name,
							Money,
							Money1: 0,
							Money2: 0
						});
					} else {
						const existingItem = mergedMap.get(name);
						existingItem.Money1 = Money;
					}
				});


				// 处理 ds2 数据集
				if (ds2) {

					ds2.forEach(item => {
						const {
							name,
							Money
						} = item;
						// 如果映射中已经有这个 name，更新它；否则，添加新条目
						if (!mergedMap.has(name)) {
							mergedMap.set(name, {
								name,
								Money,
								Money1: 0,
								Money2: 0
							});
						} else {
							const existingItem = mergedMap.get(name);
							existingItem.Money2 = Money;
						}
					});
				}

				// 将映射转换为数组并返回
				return Array.from(mergedMap.values());
			}
		}

	}
</script>

<style lang="scss" scoped>
	$h-padding: 5px;
	$v-padding: 10px;
	$radius: 5px;

	// 实时数据
	.rtTop {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px 0;
		font-size: 18px;
		font-weight: 500;

		&-left {
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba(108, 148, 255, 1);
			background: rgba(108, 148, 255, .11);
			width: 36px;
			height: 36px;
			line-height: 36px;
			border-radius: 18px;
		}

		&-right {
			margin-left: 20px;
		}
	}

	.rtBot {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		color: #909399;

		&-right {
			margin-left: 10px;
		}
	}

	// 待办
	.todoTop {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		padding: 5px 10px;

		&-text {
			font-weight: 500;
			font-size: 18px;
			margin-left: 10px;
		}
	}

	.todoBot {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		padding: 5px 10px;
		color: #909399;
		font-size: 14px;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}

	//设置轮播的指示点大小
	.swiper {
		height: 160px;

		::v-deep .uni-swiper-dots {
			// 指示点整个区域
			bottom: 10rpx;
		}

		::v-deep .uni-swiper-dot {
			// 指示点元素默认样式
			width: 10rpx;
			height: 6rpx;
			border-radius: 4rpx;
		}

		::v-deep .uni-swiper-dot-active {
			// 指示点元素激活（当前选中）状态样式
			width: 20rpx;
			background: #51d0d0;
		}
	}

	// 快捷菜单宫格
	.grid-text {
		font-size: 12px;
		color: #909399;
		padding: 5px 0 10px 0;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	// 待办/实时数据横向滚动
	.scrollWrap {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-content: flex-start;
		max-height: 180px;
		overflow-y: hidden;
		overflow-x: auto;

		&-item {
			width: 35vw;
			height: 80px;
			display: flex;
			flex-direction: column;
			background: linear-gradient(to bottom right, #F6F6F6, #FFFFFF);
			border-radius: 5px;
			justify-content: center;
			align-items: center;
		}
	}

	.boardWrap {
		display: flex;
		flex-direction: column;

		.commonBox {
			display: flex;
			flex-direction: column;
			padding: $v-padding $h-padding;
			background-color: #ffffff;
			margin-bottom: $v-padding;
			border-radius: $radius;

			&-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 $h-padding $v-padding $h-padding;

				&-left {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					width: 150rpx;
					font-size: 14px;
					font-weight: 500;
				}

				&-right {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					width: 100rpx;
				}
			}

			&-content {
				display: flex;
				flex-direction: column;
			}
		}

	}
</style>